/* 登录页思路分析
1.切换登录与注册盒子
2.登录功能
3.注册功能
*/


//1.切换登录与注册盒子
//1.1点击切换注册,注册显示,登录隐藏
document.querySelector('.login a').addEventListener('click', function () {
    document.querySelector('.register').style.display = 'block'
    document.querySelector('.login').style.display = 'none'
})
// 1.1点击切换登录,注册隐藏,登录显示
document.querySelector('.register a').addEventListener('click', function () {
    document.querySelector('.login').style.display = 'block'
    document.querySelector('.register').style.display = 'none'
})


//2.注册功能
//2.1收集数据
//2.2校验数据:非空判断+正则
//2.3 发送ajax
//2.4处理数据

//给注册按钮注册点击事件
document.querySelector('.register .btn').addEventListener('click', function (e) {
    //阻止默认事件
    e.preventDefault()
    //收集数据
    const username = document.querySelector('.register [name="username"]').value
    const password = document.querySelector('.register [name="password"]').value
    console.log(username, password);
    //校验数据:非空判断+正则
    if (username === '' || password === '') {
        return Toast.fail('输入框不能为空')
    }
    //正则
    if (/^\w{6,15}$/.test(username) == false || /^\w{6,15}$/.test(password) == false) {
        return Toast.fail('用户名和密码必须是数字字母,6~15位')
    }
    // 发送ajax
    axios({
        url: '/api/register',
        method: 'post',
        data: { username, password }
    }).then(res => {
        //成功回调
        console.log(res)
        //弹窗提示
        Toast.info(res.data.message)
        //如果用户注册成功,就切换到登录页
        if (res.data.code === 0) {
            document.querySelector('.register a').click()
        }
    })
})


//3.登录功能
//3.1收集用户输入的数据
//3.2校验数据 非空+正则
//3.3发送ajax
//3.4处理数据

//给登录按钮注册点击事件
document.querySelector('.login .btn').addEventListener('click', function (e) {
    //阻止默认事件
    e.preventDefault()
    const username = document.querySelector('.login [name="username"]').value
    const password = document.querySelector('.login [name="password"]').value
    //校验数据:非空判断+正则
    if (username === '' || password === '') {
        return Toast.fail('输入框不能为空')
    }
    //正则
    if (/^\w{6,15}$/.test(username) == false || /^\w{6,15}$/.test(password) == false) {
        return Toast.fail('用户名和密码必须是数字字母,6~15位')
    }
    //发送请求
    axios({
        url: '/api/login',
        method: 'post',
        data: { username, password }
    }).then(res => {
        //成功回调
        console.log(res)
        //弹窗提示
        Toast.info(res.data.message)
        //如果用户注册成功,就切换到首页
        if (res.data.code === 0) {
            //存储token
            localStorage.setItem('token', res.data.token)
            //跳转页面
            location.href = './index.html'
        }
    })
})




